import './App.css';
import { useState } from 'react';
import { Layout } from 'antd';
import Sidebar from './components/Sidebar';
import Header from './components/Header';
import UserManagement from './pages/UserManagement';
import Login from './pages/Login';
import LogManagement from './pages/LogManagement';
import RoleManagement from './pages/RoleManagement';
import AdminManagement from './pages/AdminManagement';
import MenuManagement from './pages/MenuManagement';
import FriendLinkManagement from './pages/FriendLinkManagement';
import UrlSettings from './pages/UrlSettings';
import EmailSettings from './pages/EmailSettings';
import ArticleCategory from './pages/ArticleCategory';
import ArticleManagement from './pages/ArticleManagement';
import Dashboard from './pages/Dashboard';
import PermissionManagement from './pages/PermissionManagement';

const { Content, Sider } = Layout;

function App() {
  const [currentPage, setCurrentPage] = useState('dashboard');
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [user, setUser] = useState(null);
  const [collapsed, setCollapsed] = useState(false);

  const handleLogin = (userData) => {
    setIsAuthenticated(true);
    setUser(userData);
  };

  const handleLogout = () => {
    setIsAuthenticated(false);
    setUser(null);
    setCurrentPage('dashboard');
  };

  const renderPage = () => {
    if (!isAuthenticated) {
      return <Login onLogin={handleLogin} />;
    }

    switch (currentPage) {
      case 'dashboard':
        return <Dashboard />;
      case 'users':
        return <UserManagement />;
      case 'roles':
        return <RoleManagement />;
      case 'logs':
        return <LogManagement />;
      case 'admins':
        return <AdminManagement />;
      case 'menus':
        return <MenuManagement />;
      case 'friendlinks':
        return <FriendLinkManagement />;
      case 'urlsettings':
        return <UrlSettings />;
      case 'emailsettings':
        return <EmailSettings />;
      case 'articlecategory':
        return <ArticleCategory />;
      case 'articles':
        return <ArticleManagement />;
      case 'permissions':
        return <PermissionManagement />;
      default:
        return <Dashboard />;
    }
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {isAuthenticated && (
        <Sider
          width={200}
          style={{ background: '#fff' }}
          collapsible
          collapsed={collapsed}
          onCollapse={setCollapsed}
          trigger={null}
        >
          <Sidebar onMenuClick={setCurrentPage} collapsed={collapsed} />
        </Sider>
      )}
      <Layout>
        {isAuthenticated && (
          <Header
            onLogout={handleLogout}
            user={user}
            collapsed={collapsed}
            onToggleCollapse={() => setCollapsed(!collapsed)}
          />
        )}
        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
          {renderPage()}
        </Content>
      </Layout>
    </Layout>
  );
}

export default App;
